<!-- 后台管理 -->
 <!-- sections/AdminPanel.vue -->
<template>
    <section class="container mx-auto px-4 py-8">
      <h2 class="text-2xl font-bold text-blue-800 mb-6">系统管理后台</h2>
  
      <!-- 管理导航 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
        <div class="border-b">
          <div class="flex">
            <button 
              v-for="tab in tabs"
              :key="tab.id"
              @click="activeTab = tab.id"
              :class="[activeTab === tab.id ? 'border-blue-600 text-blue-600' : 'text-gray-500']"
              class="px-6 py-4 font-medium border-b-2 transition-colors flex items-center"
            >
              <font-awesome-icon :icon="tab.icon" class="mr-2" />
              {{ tab.name }}
            </button>
          </div>
        </div>
  
        <!-- 数据统计面板 -->
        <div class="p-6" v-if="activeTab === 'dashboard'">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div v-for="stat in statistics" :key="stat.title" 
                 class="bg-gradient-to-br p-6 rounded-xl text-white"
                 :class="stat.color">
              <div class="flex items-center justify-between">
                <h4 class="text-lg font-medium">{{ stat.title }}</h4>
                <font-awesome-icon :icon="stat.icon" class="text-2xl opacity-80" />
              </div>
              <p class="text-3xl font-bold mt-2">{{ stat.value }}</p>
              <p class="text-sm opacity-80 mt-1">{{ stat.change }}</p>
            </div>
          </div>
  
          <!-- 访问趋势图表 -->
          <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">访问趋势</h3>
            <!-- 这里可以集成图表组件 -->
          </div>
        </div>
  
        <!-- 景点管理 -->
        <div class="p-6" v-if="activeTab === 'attractions'">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold">景点数据管理</h3>
            <button 
              @click="openAttractionEditor(null)"
              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all"
            >
              <font-awesome-icon icon="plus" class="mr-2" />
              新增景点
            </button>
          </div>
  
          <!-- 景点筛选 -->
          <div class="flex gap-4 mb-6">
            <SearchFilter 
              v-model="attractionSearch"
              placeholder="搜索景点名称..."
              class="w-64"
            />
            <select 
              v-model="attractionCategory"
              class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
            >
              <option value="">全部分类</option>
              <option v-for="cat in categories" :key="cat">{{ cat }}</option>
            </select>
          </div>
  
          <!-- 数据表格 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">景点名称</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">分类</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">评分</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">状态</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="item in filteredAttractions" :key="item.id">
                  <td class="px-6 py-4 whitespace-nowrap">{{ item.name }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                      {{ item.category }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <span class="text-yellow-400 mr-1">
                        <font-awesome-icon icon="star" />
                      </span>
                      {{ item.rating }}
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="getStatusClass(item.status)" class="px-2 py-1 rounded-full text-sm">
                      {{ item.status }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap space-x-2">
                    <button @click="openAttractionEditor(item)" class="text-blue-600 hover:text-blue-900">
                      <font-awesome-icon icon="edit" class="mr-1" />
                      编辑
                    </button>
                    <button @click="deleteAttraction(item.id)" class="text-red-600 hover:text-red-900">
                      <font-awesome-icon icon="trash" class="mr-1" />
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
  
        <!-- 用户管理 -->
        <div class="p-6" v-if="activeTab === 'users'">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold">用户管理</h3>
            <button 
              @click="openUserEditor(null)"
              class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all"
            >
              <font-awesome-icon icon="user-plus" class="mr-2" />
              新增用户
            </button>
          </div>
  
          <!-- 用户筛选 -->
          <div class="flex gap-4 mb-6">
            <SearchFilter 
              v-model="userSearch"
              placeholder="搜索用户名/邮箱..."
              class="w-64"
            />
            <select 
              v-model="userRole"
              class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
            >
              <option value="">全部角色</option>
              <option v-for="role in roles" :key="role">{{ role }}</option>
            </select>
          </div>
  
          <!-- 用户表格 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">用户名</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">邮箱</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">角色</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">状态</th>
                  <th class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="user in filteredUsers" :key="user.id">
                  <td class="px-6 py-4 whitespace-nowrap">{{ user.username }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">{{ user.email }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">
                      {{ user.role }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="getUserStatusClass(user.status)" class="px-2 py-1 rounded-full text-sm">
                      {{ user.status }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap space-x-2">
                    <button @click="openUserEditor(user)" class="text-blue-600 hover:text-blue-900">
                      <font-awesome-icon icon="edit" class="mr-1" />
                      编辑
                    </button>
                    <button @click="deleteUser(user.id)" class="text-red-600 hover:text-red-900">
                      <font-awesome-icon icon="trash" class="mr-1" />
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
  
        <!-- 系统设置 -->
        <div class="p-6" v-if="activeTab === 'settings'">
          <h3 class="text-xl font-semibold mb-6">系统设置</h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 基本设置 -->
            <div class="bg-gray-50 p-6 rounded-xl">
              <h4 class="text-lg font-medium mb-4">基本设置</h4>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">系统名称</label>
                  <input 
                    v-model="settings.siteName"
                    type="text"
                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">系统描述</label>
                  <textarea 
                    v-model="settings.description"
                    rows="3"
                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                  ></textarea>
                </div>
              </div>
            </div>
  
            <!-- 高级设置 -->
            <div class="bg-gray-50 p-6 rounded-xl">
              <h4 class="text-lg font-medium mb-4">高级设置</h4>
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">
                    <span>维护模式</span>
                  </label>
                  <div class="flex items-center space-x-2">
                    <input 
                      v-model="settings.maintenance"
                      type="checkbox"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500"
                    />
                    <span class="text-sm text-gray-600">启用维护模式</span>
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">缓存过期时间（分钟）</label>
                  <input 
                    v-model="settings.cacheExpiration"
                    type="number"
                    class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
            </div>
          </div>
  
          <div class="mt-6 flex justify-end">
            <button 
              @click="saveSettings"
              class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-all"
            >
              <font-awesome-icon icon="save" class="mr-2" />
              保存设置
            </button>
          </div>
        </div>
      </div>
    </section>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import SearchFilter from '../ui/SearchFilter.vue'
  
  // 标签页配置
  const tabs = [
    { id: 'dashboard', name: '数据统计', icon: 'chart-line' },
    { id: 'attractions', name: '景点管理', icon: 'mountain' },
    { id: 'users', name: '用户管理', icon: 'users' },
    { id: 'settings', name: '系统设置', icon: 'cog' }
  ]
  const activeTab = ref('dashboard')
  
  // 数据统计
  const statistics = ref([
    { 
      title: '总访问量', 
      value: '12,456', 
      change: '较上月增长 8.2%',
      icon: 'chart-line',
      color: 'from-blue-500 to-blue-600'
    },
    { 
      title: '景点数量', 
      value: '42', 
      change: '本月新增 3 个',
      icon: 'mountain',
      color: 'from-green-500 to-green-600'
    },
    { 
      title: '注册用户', 
      value: '2,841', 
      change: '今日新增 12 人',
      icon: 'users',
      color: 'from-purple-500 to-purple-600'
    },
    { 
      title: '评论数量', 
      value: '9,280', 
      change: '较上周增长 5.3%',
      icon: 'comments',
      color: 'from-orange-500 to-orange-600'
    }
  ])
  
  // 景点管理
  const attractionSearch = ref('')
  const attractionCategory = ref('')
  const categories = ['文化古迹', '自然风光', '博物馆', '特色美食', '休闲娱乐']
  const attractions = ref([
    { 
      id: 1, 
      name: '法门寺', 
      category: '文化古迹',
      rating: 4.8,
      status: '已发布'
    },
    { 
      id: 2, 
      name: '太白山', 
      category: '自然风光',
      rating: 4.9,
      status: '已发布'
    }
  ])
  
  const filteredAttractions = computed(() => {
    return attractions.value.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(attractionSearch.value.toLowerCase())
      const matchesCategory = !attractionCategory.value || item.category === attractionCategory.value
      return matchesSearch && matchesCategory
    })
  })
  
  // 用户管理
  const userSearch = ref('')
  const userRole = ref('')
  const roles = ['管理员', '编辑', '普通用户']
  const users = ref([
    {
      id: 1,
      username: 'admin',
      email: 'admin@example.com',
      role: '管理员',
      status: '正常'
    },
    {
      id: 2,
      username: 'editor',
      email: 'editor@example.com',
      role: '编辑',
      status: '正常'
    }
  ])
  
  const filteredUsers = computed(() => {
    return users.value.filter(user => {
      const matchesSearch = 
        user.username.toLowerCase().includes(userSearch.value.toLowerCase()) ||
        user.email.toLowerCase().includes(userSearch.value.toLowerCase())
      const matchesRole = !userRole.value || user.role === userRole.value
      return matchesSearch && matchesRole
    })
  })
  
  // 系统设置
  const settings = ref({
    siteName: '宝鸡智慧旅游管理系统',
    description: '提供景点管理、用户管理等功能的综合管理平台',
    maintenance: false,
    cacheExpiration: 30
  })
  
  // 工具函数
  const getStatusClass = (status: string) => {
    switch (status) {
      case '已发布':
        return 'bg-green-100 text-green-800'
      case '草稿':
        return 'bg-gray-100 text-gray-800'
      case '待审核':
        return 'bg-yellow-100 text-yellow-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }
  
  const getUserStatusClass = (status: string) => {
    switch (status) {
      case '正常':
        return 'bg-green-100 text-green-800'
      case '禁用':
        return 'bg-red-100 text-red-800'
      case '待验证':
        return 'bg-yellow-100 text-yellow-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }
  
  // 操作方法
  const openAttractionEditor = (item: any) => {
    // 实现景点编辑逻辑
    console.log('编辑景点:', item)
  }
  
  const deleteAttraction = (id: number) => {
    // 实现景点删除逻辑
    console.log('删除景点:', id)
  }
  
  const openUserEditor = (user: any) => {
    // 实现用户编辑逻辑
    console.log('编辑用户:', user)
  }
  
  const deleteUser = (id: number) => {
    // 实现用户删除逻辑
    console.log('删除用户:', id)
  }
  
  const saveSettings = () => {
    // 实现设置保存逻辑
    console.log('保存设置:', settings.value)
  }
  </script>
  
  <style scoped>
  .tab-active {
    @apply border-blue-600 text-blue-600;
  }
  </style>